import React, { Component } from 'react';

import {
  StyleSheet, View, TouchableWithoutFeedback, Text, ScrollView,
} from 'react-native';
import ZlstIcon from '../../../components/zlst-icons';
import TaskItemImage from './task-item-image';
import Theme from '../../../native-base-theme/variables/commonColor';

class TaskItem extends Component {
  componentDidMount() {

  }

  toQrcode = (checkrecordId) => {
    global.navigation.navigate({
      routeName: 'Qrcode',
      params: {
        flag: 'task',
        checkrecordId,
      },
    });
  }

  toTask = (checkrecordId) => {
    global.navigation.navigate({
      routeName: 'Task',
      params: {
        checkrecordId,
      },
    });
  }

  render() {
    const { item } = this.props;
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={() => this.toTask(item.checkrecordId)}>
          <View style={styles.title_container}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <Text style={styles.title}>
                {item.startTime} {item.statusName}
              </Text>
              {item.statusName == '巡检中' && (
                <ZlstIcon
                  onPress={() => this.toQrcode(item.checkrecordId)}
                  name="saoma"
                  size={24}
                  color={Theme.myPrimary}
                />
              )}
            </View>
            <Text style={styles.text}>
              {item.checkStaffName} {item.checkTypeName}
            </Text>
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              {/* {item.checkEquipmentVOs && item.checkEquipmentVOs.map((data, index) => (<TaskItemImage item={data} key={index} />))} */}
              {item.checkEquipmentVOs && item.checkEquipmentVOs.map((data, index) => {
                if (index <= 10) {
                  return (<TaskItemImage item={data} key={index} />);
                }
                return null;
              })}
            </ScrollView>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    marginLeft: 8,
    marginRight: 8,
    marginBottom: 4,
    marginTop: 4,
    padding: 8,
    backgroundColor: 'white',
    borderRadius: 8,
  },
  title_container: {
    flexDirection: 'column',
  },
  title: {
    color: Theme.myPrimary,
    marginBottom: 4,
    fontSize: 15,
  },
  text: {
    color: Theme.myPrimary,
    marginBottom: 4,
    fontSize: 14,
  },
});

export default TaskItem;
